<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>{{$title}}</title>
    <link rel="stylesheet" href="{{@asset('css/reset.css')}}"/>
    <link rel="stylesheet" href="{{@asset('less/index.css')}}"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="keywords" content="{{$keywords}}"/>
    <meta name="description" content="{{$description}}"/>
    <meta name="baidu-site-verification" content="x1XYMzRXUS" />
</head>
<body>
<header>
    <img src="{{@asset('image/back_icon.png')}}">
    <div>
        <img src="{{@asset('image/top-logo.png')}}">
        <span>好头发</span>
    </div>
    <img src="{{@asset('image/top-icon.png')}}">
</header>
<section class="menu">
   <a href="http://www.haotoufa.com/">首页</a>
<a href="http://www.haotoufa.com/news/" target="_blank">头发资讯</a>
<a href="http://www.haotoufa.com/yangfahufa/" target="_blank">养发护发</a>
<a href="http://www.haotoufa.com/tfyy/" target="_blank">脱发原因</a>
<a href="http://tuofazenmeban.haotoufa.com" target="_blank">脱发解决</a>
<a href="http://faxing.haotoufa.com/" target="_blank">发型设计</a>
<a href="http://faxing.haotoufa.com/mxfx/" target="_blank">明星发型</a>
<a href="http://www.haotoufa.com/zhifa/" target="_blank">植发</a>
<a href="http://bbs.haotoufa.com/youhui.html" target="_blank">植发优惠</a>
<a href="http://www.haotoufa.com/zt/" target="_blank">植发案例</a>
<a href="http://bbs.haotoufa.com" target="_blank">论坛</a>
</section>
<section id='mainPart'>
   <section class="breadNavigation"> 
   </section>
   <section class="main_show column" id='container'>
    <div class="list">
    </div>
</section>
</section>

<footer class='column'>
    <div class="Navigation footer">
                 <a href="/">主页</a> 
   <a href="/column/75">脱发</a><a href="/column/145">植发</a><a href="/column/144">发型</a><a href="/column/5">养护</a> 
    <a href="http://bbs.haotoufa.com/about/">关于我们</a> 
    </div>
    <div class="footer_message">
        <p>
            <span>好头发网@2016&nbsp;&nbsp;&nbsp;&nbsp;haotoufa.com</span>
        </p>
    </div>
</footer>
<script src="{{@asset('js/jquery-1.11.1.js')}}"></script>
<script src="{{@asset('js/vue.js')}}"></script>
<script> 
   $("header img:first-child").click(function(){
      location.href='/';
   })
    $("header img:last-child").click(function(){
        $(".menu").toggle();
    })

    //定义滑动无限加载
    //分页基本判断
    var page = 0
    //分页
    $(document).ready(function(){
        $('#mainPart').scroll(function(){
            if  ($('#mainPart').scrollTop()>$('#container').height() - $('#mainPart').height()+49)
            {
                setTimeout(function(){
                    page++;
                    getArticle(page);
                }, 250);
            }
        }).trigger('scroll');
    });
    
    var qs = location.pathname;
    var column_id =  qs.replace(/[^0-9]/ig,""); 

    //定义添加模板
    var template ='<div class="list-member template" v-for="item in items" style="display: none;" @click="jump(item.id)"><div class="list-left" v-if=\'item.titlepic!=""\'><img :src="item.titlepic"></div><div class="list-right" v-if=\'item.titlepic!=""\'><a :href="&quot;/column/&quot;+item.classid">@{{item.classname}}</a><p>@{{item.title}}</p></div><div class="list-right middle" v-if=\'item.titlepic==""\'><a :href="&quot;/column/&quot;+item.classid">@{{item.classname}}</a><p>@{{item.title}}</p></div></div>';

   $(".list-member").on('click',function(){
       var articleID = $(this).data('articleid');
        location.href='/article?articleID='+articleID;
    })
    //封装请求数据函数
    function getArticle(page){


         $('#container .list').append(template);
         $.get('/api/articleList/'+column_id+'/'+page,function(data){
                //1级面包屑
       if(data.parent_class_name== ''){
        $(".breadNavigation").html('<span><a href="/">首页</a>&nbsp;</span><span>></span><span class="active">&nbsp;'+data.class_name+'&nbsp;</span>')
      }else{
        //2级面包屑
        $(".breadNavigation").html('<span><a href="/">首页</a>&nbsp;</span><span>></span><span>&nbsp;'+data.parent_class_name+'&nbsp;</span><span>></span><span class="active">&nbsp;'+data.class_name+'&nbsp;</span>')
      } 
            new Vue({
                  el: '#container',
                  data: {
                     items:data.data
                 },
                methods:{
                    jump:function(id){
                      location.href='/article/'+id;
                    }
                 }
             });

           if($(".Navigation").css("visibility")!="hidden"){
             $(".Navigation").css("visibility","visible")
             }else{
        $(".Navigation").css("visibility","visible");
    };
        $(".footer_message").css("display",'block');  
            $(".main_show").css('display','block');
            $(".template").css("display",'block');
      });
    }
   

</script>
</body>
</html>